<template>
  <div class="package">
    <div class="search">
      <el-button type="primary" size="small" @click="editRef.drawer=true">添加</el-button>
    </div>
    <el-table size="small" :data="displayedPackages" style="width: 98%">
      <el-table-column label="序号" width="50" type="index" />
      <el-table-column prop="travelPackageName" label="套餐名称" width="180" />
      <el-table-column prop="travelDate" label="出发时间" width="180" />
      <el-table-column prop="overDate" label="结束时间" width="180" />
      <el-table-column prop="price" label="价格" width="100" />
      <el-table-column prop="travelPackageType" label="套餐类型" width="120" />
      
      <el-table-column prop="travelPackageImage" label="套餐图片" width="180" >
      <template #default="scope">
        <div class="demo-image__preview" v-if="scope.row.travelPackageImageList">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.travelPackageImageList[0]"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="scope.row.travelPackageImageList"
              :initial-index="4"
              fit="cover"
          />
        </div>
      </template>
    </el-table-column>
      <el-table-column prop="maxPeople" label="最大人数" width="100" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="viewDetails(scope.row.id)">详情</el-button>
          <el-button size="small" @click="editPackage(scope.row.id)">修改</el-button>
          <!-- <el-button size="small" type="danger" @click="removePackage(scope.row.id)">下架</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      small
      background
      layout="prev, pager, next"
      :total="packages.length"
      v-model:current-page="pageIndex"
    />
    <EditPackage ref="editRef" @sync-list="loadPackages"></EditPackage>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { $getPackages } from '../../api/travelAdmin';
import { ElNotification, ElMessageBox } from 'element-plus';
import EditPackage from '../../components/travel/EditPackage.vue';
// 套餐列表
let packages = ref([]);

// 页码
let pageIndex = ref(1);

// 显示的套餐列表
let displayedPackages = computed(() => {
  return formattedPackageImages.value.slice((pageIndex.value - 1) * 10, pageIndex.value * 10);
});

// 加载套餐列表
const loadPackages = async () => {
    let ret = await $getPackages();
    packages.value = ret.data;
};

//格式化套餐图片
const formattedPackageImages = computed(() => {
  return packages.value.map(item => {
    if (item.travelPackageImage) {
      item.travelPackageImageList = item.travelPackageImage.split(';');
    }
    console.log(item);

    return item;
  });
});

// 查看详情
const viewDetails = (id: number) => {
  // 详情逻辑
  console.log('查看详情:', id);
};

// 编辑套餐
const editPackage = (id: number) => {
  // 编辑逻辑
  console.log('编辑套餐:', id);
};

// 下架套餐
// const removePackage = async (id: number) => {
//   ElMessageBox.confirm('确定下架该套餐吗？', '提示', {
//     confirmButtonText: '确定',
//     cancelButtonText: '取消',
//     type: 'warning',
//   })
//     .then(async () => {
//       let ret = await $removePackage({ id });
//       if (ret.code === 2001) {
//         ElNotification({
//           title: '成功！',
//           message: '套餐下架成功！',
//           type: 'success',
//         });
//         // 重新加载列表
//         loadPackages();
//       } else {
//         ElNotification({
//           title: '失败！',
//           message: '下架失败，请联系管理员！',
//           type: 'error',
//         });
//       }
//     })
//     .catch(() => {});
// };

// 定义编辑组件ref对象
let editRef = ref(null);

onMounted(() => {
  loadPackages();
});
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 5px;
}
</style>